<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Images Multi-Composantes</title>
<link href="templatemo_style.css" rel="stylesheet" type="text/css" />
<!-- include color picker-->
<link href="css/colorPicker.css" rel="stylesheet" type="text/css">
<script language="javascript" type="text/javascript" src="js/colorPicker.colorspaceConvertion.js"></script>
<script language="javascript" type="text/javascript" src="js/colorPicker.simpleColorConvertion.js"></script>
<script language="javascript" src="js/cookies.js">/* gestion des cookies */</script>
<script language="javascript" src="js/colorPicker.local.fr.js"></script>
<script language="javascript" src="js/colorPicker.global.js"></script>
<script language="javascript" src="js/colorPicker.class.js"></script>
<script language="javascript" type="text/javascript">
  function uniqueIDInDOM()  //genère un id unique dans le DOM
  {
	var resu=Math.ceil(Math.random()*9999)+'_'+(+new Date().getTime());
			//tant qu'un element du dom possede deja un tel ID
	while(document.getElementById(resu)!=null)         {
			   // on en genere aleatoirement un nouveau
			   resu=Math.ceil(Math.random()*9999)+'_'+(+new Date().getTime());
			}
			//le fait d'utiliser un timestamp limite grandement la chance d'avoir
			//mais vaut mieux verifier quand même à mon avis
	return resu;
  }

  function getAbsolutePositionOf(obj) //return Array(x,y,width,height)  //OK
  {
	var y=0;
	var x=0;
	var width=obj.offsetWidth;
	var height=obj.offsetHeight;
    while(obj) {x+=obj.offsetLeft; y+=obj.offsetTop; obj=obj.offsetParent;}
	return new Array(x,y,width,height);
  }
</script>
<script language="javascript" type="text/javascript">
  function f_init()
  {
	Array.prototype.inArray = function (value)	//ajout de la fonction inArray aux objets Array
	{
	// retourne true si value est contenu dans la tableau, false sinon
	// Exemple : var tab=array('rouge','vert'); tab.inArray('rouge'); => true et tab.inArray('red')==false;
		var i;
		for (i=0; i < this.length; i++)
		{
			// on utilise la triple egalité pour avoir une egalité parfaite et pas juste une similitude
			if (this[i] === value) { return true; }
		}
		return false;
	}



	//declaration du color picker
	var cp1=new ColorPicker('idDivContainer');
	cp1.init();
  }
  
</script>
</head>
<body onLoad="f_init();">

<div id="templateo_container">
	<div id="templatemo_top_panel">
    	<div id="site_logo">
        	<a href="index.html"><img src="images/templatemo_logo.jpg" alt="Images Multi-Composantes" /></a>
        </div>
        <div id="header_menu_section">
            <div class="header_menu contact_menu">
            	<a href="http://www.ingenieur-imac.fr/"></a>
            </div>
        </div><!-- end of header mneu section -->
    
    	<div class="cleaner"></div>
    </div> <!-- end of top panel -->
    
    <div id="templatemo_menu_banner_panel">
    
    	<div id="templatemo_menu_wrapper">
        	<div id="templatemo_menu">
                <ul>
                      <li><a href="index.html">Accueil</a></li>
					  <li><a href="explication.html">Théorie des images </a></li>
                      <li><a href="rgb.html">Images RGB</a></li>
					  <li><a href="hsv.html">Images HSV & CMYK</a></li>
                      <li class="last"><a href="hyperspectrale.html">Images Hyperspectrales</a></li>
                </ul>    	
            </div> <!-- end of menu -->        
        </div> <!-- end of menu wrapper -->
        
        <div id="templatemo_banner">
        
        	<div class="header_02"  style="color:#ffffff">Images HSV et CMYK</div>
            <p></p>
        
        </div> <!-- end of banner -->
        
        <div class="cleaner">&nbsp;</div>    
    </div> <!-- end of menu & banner panel -->
    
    <div id="templatemo_content_wrapper">
    	
        <div id="templatemo_content">
		
			<div class="header_01">Le modèle HSV</div>
				<div class="section_w600">
					<p>
					Le modèle HSV est une représentation non linéaire de l'espace des couleurs RGB défini dans cet article : <a href="rgb.html">Images RGB</a>. HSV est l'acronyme de Hue, Saturation, Value et pourra être traduit en français par Teinte, Saturation, Valeur.<br>
					Cette représentation permet de visualiser les composantes d'une couleur selon des paramètres plus intuitifs que ses composantes en couleurs primaires RGB. <br>
					Ainsi, on pourra définir : <br><br>
						- <b>Hue</b> comme la couleur, fusion des composantes RGB. Elle est codée par un nombre entre 0 et 360 degrés qui represente la postion de la couleur sur le cercle des couleurs. <br><br>
						- <b>Saturation</b> comme la pureté de la couleur variant de 0 à 100%. Une faible valeur de ce paramètre donne l'impression d'une image grisée.  <br><br>
						- <b>Value</b> qui correspond à la brillance de la couleur entre 0 et 100%. Elle fera varier la couleur finale du noir vers le blanc. 
					</p>
					<br><br>
					<img style="margin-left:250px" src="images/hsvcone.gif" />
					<br><br>
					<p style="margin-left:300px">Figure 1. Le cone des couleurs HSV</p>
					<div class="cleaner"></div>
					</br></br>
				</div>
			
			<div class="header_01">Passage RGB - HSV</div>
				<div class="section_w600">
				<p>Le passage du modèle RVB au modèle HSV se fait via l'intermédiaire de transformations non-linéaires. <br>
				Pour calculer ces composantes, nous allons avoir besoin pour chaque couleur d'une valeur appelée <b>chroma</b>. Cette valeur est un indicateur de la dynamique d'une couleur. <br>
				Elle s'ecrit de la façon suivante: <br><br>
				<a href="http://www.codecogs.com/eqnedit.php?latex=C = max(R,G,B) - min(R,G,B)" target="_blank"><img src="http://latex.codecogs.com/gif.latex?C = max(R,G,B) - min(R,G,B)" title="C = max(RGB) - min(RGB)" /></a>
				<br><br>
				On peut désormais calculer la valeur des composantes HSV à l'aide des équations suivantes : <br><br>
				<a href="http://www.codecogs.com/eqnedit.php?latex=H' = \begin{cases} & \text{ undefined, si } C= 0\\ & \text{ ((G-B)/C)mod6 si } x= max(R,G,B) = R) \\ & \text{ ((B-R)/C)@plus;2 si } x= max(R,G,B) = G) \\ & \text{ ((R-G)/C)@plus;4 si } x= max(R,G,B) = B) \end{cases} \\ \\ H = H' * 60^{\circ}" target="_blank"><img src="http://latex.codecogs.com/gif.latex?H' = \begin{cases} & \text{ undefined, si } C= 0\\ & \text{ ((G-B)/C)mod6 si } x= max(R,G,B) = R) \\ & \text{ ((B-R)/C)+2 si } x= max(R,G,B) = G) \\ & \text{ ((R-G)/C)+4 si } x= max(R,G,B) = B) \end{cases} \\ \\ H = H' * 60^{\circ}" title="H' = \begin{cases} & \text{ undefined, si } C= 0\\ & \text{ ((G-B)/C)mod6 si } x= max(R,G,B) = R) \\ & \text{ ((B-R)/C)+2 si } x= max(R,G,B) = G) \\ & \text{ ((R-G)/C)+4 si } x= max(R,G,B) = B) \end{cases} \\ \\ H = H' * 60^{\circ}" /></a>
				<br><br>
				<a href="http://www.codecogs.com/eqnedit.php?latex=S = \left\{\begin{matrix} 0, si  C = 0 & \\ C/V sinon & \end{matrix}\right." target="_blank"><img src="http://latex.codecogs.com/gif.latex?S = \left\{\begin{matrix} 0, si \ C = 0 & \\ C/V sinon & \end{matrix}\right." title="S = \left\{\begin{matrix} 0, si C = 0 & \\ C/V sinon & \end{matrix}\right." /></a>
				
				
				<br><br>
				<a href="http://www.codecogs.com/eqnedit.php?latex=V = max(R, G, B)" target="_blank"><img src="http://latex.codecogs.com/gif.latex?V = max(R, G, B)" title="V = max(R, G, B)" /></a>
				<br><br>
				</div>
				
			<div class="header_01">Le modèle CMYK</div>
				<div class="section_w600">
				
				<p>Le mode de représentation CMYK (CMJN en français) décrit les couleurs d'une image via 4 composantes : le Cyan, le Magenta, le Jaune (Yellow) et une clé noire (Key).<br>
				Contrairement au modèle RGB qui constitue en une synthèse des couleurs par addition, on a ici un modèle par synthèse soustractive. On obtient une couleur en partant du blanc et en soustrayant une certaine quantité de Cyan, de Magenta ou de Jaune. Ces couleurs sont donc les couleurs primaire de la synthèse soustractive. <br>
				La composante K (key) est utilisée en imprimerie dans un soucis d'économie d'encre. On préférera appliquer une encre noire plutôt que les 3 autres encres. Ce procédé d'imprimerie est appelé quadrichromie.
				</p>
				<br/>
				<center><img src="images/lenaCMYK.jpg" >
				<p>Figure 2. Les canaux de Lena en CMYK</p>
				</center>
				</div>
			<br/><br/>
			<div class="header_01">Passage RGB - CMYK</div>
				<div class="section_w600">
				<p>Contrairement au modèle HSV, le passage du modèle RGB au modèle CMYK fait appel à des transformations linéaires. Le passage RGB vers CMYK se fait en deux étpapes : <br><br>
					- passage de RGB vers CMY<br><br>		
					<a href="http://www.codecogs.com/eqnedit.php?latex=\\c = 1 -r \\ m = 1 - v \\ y = 1 - b \\" target="_blank"><img src="http://latex.codecogs.com/gif.latex?\\c = 1 -r \\ m = 1 - v \\ y = 1 - b \\" title="\\c = 1 -r \\ m = 1 - v \\ y = 1 - b \\" /></a>
					<br><br>
					- passage de CMY vers CMYK<br><br>
					<a href="http://www.codecogs.com/eqnedit.php?latex=n = min (C, M, Y)\\ si, k = 1\left\{\begin{matrix} & c = 0 & \\ & m = 0 & \\ & y = 0 & \end{matrix}\right. \\ \\\\ sinon \left\{\begin{matrix} & c = C - k & \\ & m = M - k & \\ & y = Y - k & \end{matrix}\right." target="_blank"><img src="http://latex.codecogs.com/gif.latex?n = min (C, M, Y)\\ si, k = 1\left\{\begin{matrix} & c = 0 & \\ & m = 0 & \\ & y = 0 & \end{matrix}\right. \\ \\\\ sinon \left\{\begin{matrix} & c = C - k & \\ & m = M - k & \\ & y = Y - k & \end{matrix}\right." title="n = min (C, M, Y)\\ si, k = 1\left\{\begin{matrix} & c = 0 & \\ & m = 0 & \\ & y = 0 & \end{matrix}\right. \\ \\\\ sinon \left\{\begin{matrix} & c = C - k & \\ & m = M - k & \\ & y = Y - k & \end{matrix}\right." /></a>
				</p>
				</div>
			<br><br>	
			<div class="header_01">Selecteur de couleurs</div>	
				
				<p>L'application embarquée ci-dessous propose de composer sa couleur en choisissant le modèle RGB, HSV ou CMYK. Elle permet aussi de convertir les composantes d'un modèle vers l'autre. </p>
				<div class="section_w600">
				<br>
        	<td  style="width:568px; "><div style="color:#000000; padding-left:50px;" id="idDivContainer">Mon colorPicker ICI</div></td>
			<br>
			<p>Code fourni par <a href="http://www.javascriptfr.com">http://www.javascriptfr.com</a></p></div>
        </div> <!-- end of content -->
        
    </div> <!-- end of content wrapper -->
    
    <div id="templatemo_footer">
        Copyright � 2012 Adrien KIELB | Designed by <a href="http://www.templatemo.com" target="_parent">Free CSS Templates</a>
    </div> <!-- end of footer -->
</div> <!-- end of container -->
</body>
</html>